<!-- 用户列表 -->
<template>
    <div class="user-list">
        <!-- 面包屑导航栏 -->
        <Breadcrumb />
        <!-- 筛选搜索 -->
        <FilterSearch></FilterSearch>
        <!-- 数据列表 -->
        <DataList>
            <template #addbtn>
                <el-button class="button" text>添加</el-button>
            </template>
        </DataList>

        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%" class-name="table" border>
            <el-table-column prop="id" label="编号" width="60" align='center' />
            <el-table-column prop="name" label="角色称号" width="280" align='center' />
            <el-table-column prop="description" label="描述" align='center' />
            <el-table-column prop="adminCount" label="用户数" align='center' />
            <el-table-column label="添加时间" align='center'>
                <template #default="scope">
                    {{ formatDate(scope.row.createTime) }}
                </template>
            </el-table-column>

            <el-table-column label="是否启用" align='center'>
                <!-- #default=“scope”作用域插槽 通过scope.row拿到每个item的数据对象,也就是行对象;而在#default=“scope”中再加入的具名插槽其实针对的是列集合里的元素也就是列元素;那么每个列集合都有了自己的插槽,其实相当于每个列元素都有了自己的插槽，之后就可以根据名字插入自定义内容了 -->
                <template #default="scope">
                    <el-switch size="default" v-model="scope.row.status" :active-value="1" :inactive-value="0" />
                </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作" align='center'>
                <template #default="scope">
                    <el-button size="small">分配资源</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination v-model:currentPage="pageData.currentPage" v-model:page-size="pageData.pageSize"
            :page-sizes="[10, 50, 100, 200]" :small="true" layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

</template>

<script lang='ts' setup>
import { reactive, toRefs, ref } from 'vue'
import DataList from '@/components/dataList.vue';
import Breadcrumb from '@/components/breadcrumb.vue';
import FilterSearch from '@/components/filterSearch.vue';
import { formatDate } from "@/utils/formatDate"
import { useTable } from "@/components/useTable";
import * as http from '@/request/http';
const keyword = ref('')
const { tableData, pageData, handleSizeChange, handleCurrentChange } = useTable(http.admin.getRoleListApi, { keyword: keyword.value })

</script>
<style lang='scss' scoped>
.user-list {
    padding: 0 20px;
    box-sizing: border-box;

    .button {
        background-color: #409eff;
        color: white;
    }

    :deep(.el-button--small) {
        color: #409eff;
        border: none;
    }

    .table {
        margin-top: 20px;
    }
}

// 分页器样式
.el-pagination {
    justify-content: flex-end;
}
</style>